<!--
  * @Description: 招聘-职位管理
  * @Author: rcc
  * @Date: 2024-08-13 09:31:25
  * @FilePath: /rc-recruitment/pages/office/manage/manage.vue
-->

<template>
  <view class="p-h24">
    <view class="p-v32 text-700-130 text-c">已发布的岗位</view>
    <up-empty mode="list" v-if="!list.length"></up-empty>
    <view v-for="item in list" :key="item.id" class="card" :data-url="`pages/office/position/position?id=${item.id}`"
      @click="goto">
      <view class="relative flex-d-sb h-196 p-h30 p-v20" :class="[{ close: item.status === '2' }]">
        <view class="flex overflow-hidden">
          <text class="flex-1 text-700-130 truncate">{{ item.title }}【{{ getNature(item.xingzhi) }}】</text>
          <image class="square-40" :src="`/static/images/mine/${item.status === '2' ? 'edit-2' : 'edit'}.png`"
            mode="aspectFit" @click.stop.prevent="openActionSheet(item)" />
        </view>
        <text class="text-400-326">{{ item.city }} · {{ item.area }} | {{ item.lowest_education }} | {{ item.work_year }}年
          | 招{{ item.people_num }}人</text>
        <view class="flex">
          <text class="flex-1 text-400-326">薪资范围：{{ item.money_range }}</text>
          <text class="text-400-326">{{ timeFormat(item.createtime * 1000, 'yyyy/mm/dd') }}</text>
        </view>
      </view>

      <view class="card-bottom flex h-80 p-h30">
        <text class="flex-1 text-400-326">候选人<text class="text-700-530">{{ item.candidates }}</text></text>
        <text class="flex-1 text-400-326 text-c">已面试<text class="text-700-530">{{ item.interviewed }}</text></text>
        <text class="flex-1 text-400-326 text-r">已招聘<text class="text-700-530">{{ item.recruited || '0' }}</text></text>
      </view>
    </view>

    <view class="panel-view">
      <view class="fixed-view flex-r">
        <!-- <view class="button text-700-228">停止招聘</view> -->
        <view id="btn" class="button add flex text-700-228" data-url="pages/office/release/release" @click="goto">
          <image class="square-24" src="@/static/images/office/add.png" />
          <text class="m-l10">新增岗位</text>
        </view>
      </view>
    </view>
    <up-action-sheet :actions="actions" cancelText="取消" closeOnClickOverlay closeOnClickAction round="20rpx"
      :show="showActionSheet" @close="showActionSheet = false" @select="onActionSheetSelect" />
  </view>
</template>

<script lang="ts" setup>
import { defineExpose, ref } from 'vue'
import { useNavigator } from '@/hooks/use-navigator'
import { timeFormat } from '@/utils/utils'
import { TFirmPosition } from '@/types/api.d'
import { useRequest } from '@/hooks/use-request'
import { onReachBottom } from '@dcloudio/uni-app'
type ActionItem = {
  name: string;
  type: 'open' | 'close' | 'del';
}

const { goto } = useNavigator()

const actions = ref<ActionItem[]>([])
const showActionSheet = ref(false)
const selectedPosition = ref<TFirmPosition | null>(null)

const { data: list, run: getList } = useRequest(() => uni.$u.get<TFirmPosition[]>('/position/mylst'), [], { showLoading: false })
const { run: executeAction } = useRequest(
  (type: ActionItem['type']) => {
    const url = type === 'del' ? '/position/del' : '/position/edit'

    return uni.$u.post(url, {
      id: selectedPosition.value!.id,
      // 职位状态 1开启 2关闭
      status: type === 'open' ? 1 : 2,
    })
  },
  null,
  {
    immediate: false,
    showLoading: true,
    showToast: true,
    onSuccess: () => getList(),
  },
)

const getNature = (type: number) => {
  const obj = {
    1: '全职',
    2: '兼职',
    3: '实习',
  }

  return obj[type as keyof typeof obj] ?? ''
}

const openActionSheet = (data: TFirmPosition) => {
  selectedPosition.value = data

  const isClose = data.status === '2'
  actions.value = [
    { name: isClose ? '开启招聘' : '关闭招聘', type: isClose ? 'open' : 'close' },
    { name: '删除岗位', type: 'del' },
  ]

  showActionSheet.value = true
}

const onActionSheetSelect = (action: ActionItem) => {
  const cur = actions.value.find((ac) => ac.type === action.type)

  executeAction(cur!.type)
}
//触底了
onReachBottom(() => {

  console.log("触底了")
})
defineExpose({ getList })
</script>

<style lang="scss">
page {
  background-color: $page-color-4;
}
</style>

<style lang="scss" scoped>
.card {
  margin-bottom: 20rpx;
  border-radius: 20rpx;
  background-color: $bg-color-1;
  overflow: hidden;

  .close {
    &::after {
      content: '';
      position: absolute;
      right: 0;
      top: 50%;
      width: 196rpx;
      height: 196rpx;
      background: url(@/static/images/mine/icon-6.png) no-repeat center;
      background-size: contain;
      transform: translateY(-50%);
      pointer-events: none;
    }
  }

  .card-bottom {
    background-color: rgba(76, 140, 252, 0.1);
  }
}

.panel-view {
  height: 140rpx;

  .fixed-view {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 140rpx;
    padding: 0 24rpx;
    background-color: $bg-color-1;
  }

  .button {
    height: 80rpx;
    padding: 0 40rpx;
    margin-left: 20rpx;
    line-height: 80rpx;
    border-radius: 10rpx;
    background-color: #646464;
  }

  .add {
    background-color: $bg-color-2;
  }
}
</style>
